<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //21-05-19-夜-北京丰台-出租房
    //这个年纪 说永远太早 何必遗憾本不能的事情 

    //在这里回顾一下require.js的写法 假设我们又两个js文件 index.js 和 content.js文件 然后再index.js中使用content.js的返回结果 看案例 
    //首先定义 
    //content.js
    define(function(){                           //使用define函数定义一个模块
        return "A cat" 
    })
    //然后require
    //index.js
    require(["./cononent.js"],function(animal){  //使用require来获取模块 并将模块作为一个参数返回出来 
        console.log(animal)  //A cat
    })
    
    
    //CommonJS是这么写的
    //index.js
    var animal = require("./content.js")
    //content.js
    module.exports = "A cat"


    //es6写法
    //index.js
    import animal from "./content"
    //content.js
    export default "A cat"
    //在这里列举了三种方式的模块 妈妈再也不用担心混淆了 


//es6moudle的其他高级用法  
    //content.js
    export default "A cat"
    export function say(){
        return "Hellow"
    }
    export const type = "dog" 
    //在这看到 export命令除了可以输出变量 还可以输出函数 甚至是类(react的模块化基本都是输出类)
    //index.js
    import { say,type } from "./content"
    let says = say();
    console.log(`The ${type} says ${says}`)// The dog says Hellow
    //输入的时候注意 大括号里面的变量名 必须和被导入的模块content.js 对外接口的名称相同
    //如果还希望输入content.js中输出的默认值(defalut) 写在大括号外面
    //index.js
    import animal,{say,type} from "./content"
    let says = say()
    console.log(`The ${type} says ${says} to ${animal}`)// The dog says Hellow A cat


//修改变量名 
    //这个时候不能用||不想用type这个变量名 我们需要修改它 在es6中 实现一键换名 
    //index.js
    import animal, { say, type as animalType } from './content'  
    let says = say()
    console.log(`The ${animalType} says ${says} to ${animal}`)  
    //The dog says Hello to A cat


//模块的整体加载
    //除了指定加载某个输出值 还可以使用整体加载 即用*好指定一个对象 所以的输出值都在这个对象上 
    //通常*号结合as一起使用比较合适
    //index.js
    import animal, * as content from './content'  
    let says = content.say()
    console.log(`The ${content.type} says ${says} to ${animal}`)  
    //The dog says Hello to A cat





</script>